<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <canvas width="800" height="600"></canvas>
    <script>
        let canvas = document.querySelector('canvas');
        let ctx = canvas.getContext('2d');

        /*
            transform方法
                前两个参数表示x轴的方向, (1,0)表示x轴原轴，我们可以利用这点进行旋转，比如（1,1）就是旋转45度
                中间两个参数表示y轴的方向, (0,1)表示y轴原轴，原理相同
                最后两个参数表示在x轴和y轴上的移动量，0表示不移动
        */ 
        ctx.transform(1,0,0,1,100,100);
        ctx.fillRect(0,0,100,100);
        ctx.stroke();
    </script>
</body>

</html>